<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组的拓展方法</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
    </style>
</head>
<body>
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        let arr = [10,20,30,40]
        // 添加数组项(成员),会改变原数组的内容
        // push 尾插
        arr.push("洛璃")
        console.log(arr);

        // unshift 头插
        arr.unshift()

        // pop 尾删
        arr.pop()

        //shift 头删
        arr.shift()

        // slice 复制 不改动原数组
        arr.slice(1,3)

        //splice 剪切 从第n个下标开始剪切成员 并且会改变原数组
        console.log();

        //sort 排序 对成员都为数值的数组进行排序
        arr.sort() //默认升序

        arr.sort(function fn(a,b){
            // return a-b //从小到大，升序
            return b-a //从大到小，降序
        })

        // ... 扩展运算符
        console.log(...arr);//展开数组 一串数列
        // console.log("洛璃,...arr");
        // console.log([...arr,...arr2]); //合并数组

        // concat 合并数组
        let str1 = [20,30,40],
            str2 = ["洛璃"],
            str3 = [true,false]
        
        console.log(str1.concat(str2,str3));

        //但是推荐使用拓展运算符的方式来合并数组

        console.log(...str1,...str2,...str3);

        // join 将数组转换为字符串

        console.log(str1.join()); //

        // reverse 将数组翻转
        console.log(str1.reverse());//会直接改变原数组

        // isArray 判断是否为数组
        Array.isArray(str1)

        //将类数组转换为真数组
        let obj = document.querySelectorAll("li");
        console.log(Array.isArray([...obj]));

        //indexOf 查找
        console.log(arr.indexOf("洛璃"));

        // 遍历数组
        let array = [10,"暑假","C++","爬虫"]
        array.forEach(function(value,index,array){
            console.log(value,index,array);
        })

        // map
        let result = array.map(function(value ,index,array){
            return array[0]
        })
        console.log(result);

        // reduce 累加求和，阶乘
        let sub = [10,20,30,40]
        console.log("原数组",arr);
        sub.reduce(function(prev,cur,index,sub){
            /**
             *   @param prev 初始，是成员下标为0的成员，其余是上一次return 返回的结果
             *   @param cur 当前位置的成员
             *   @param index 当前成员的下标
             *   @param sub  原数组
            */
            console.log(prev,cur,index,sub);
            return prev+cur
        })

        // filter 数组的过滤  需要配合return来来决定是否过滤该成员
        let s = [10,20,30,40]
        console.log("s数组");
        let a = s.filter(function(value,index,s){
            console.log(value,index,s);
            return value>20
        })
        console.log(a);
    </script>
</body>
</html>